<!--
 * @Author: hu_binbin
 * @Date: 2021-08-06 09:29:24
 * @LastEditTime: 2021-08-21 15:19:30
 * @Description: 
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" />
			</template>
			<template slot="header_icon">
				<van-image class="imgSize" width="23" height="23" @click="rfidBtn" :src="icon.rfid" />
				<van-image class="imgSize" width="20" height="20" @click="scanBtn" :src="icon.scan" />
			</template>
		</Theader>

		<!-- 搜索区域 -->
		<van-row  class="search_header" type="flex" justify='space-around' fixed>
            <van-col span="18">
                <van-search v-model.trim="taskName" clearable @input="focus" shape="round" background="#F5F6FA" placeholder="请搜索巡视任务">
				</van-search>
			</van-col>
            <van-col span="2" class="center_center">
				<van-image class="imgSize" width="23" height="23" @click="screen" :src="icon.screen" />
            </van-col>
			<van-col span="2" class="center_center">
				<van-image class="imgSize" width="23" height="23" @click="addTask" :src="icon.add" />
			</van-col>
		</van-row>

		<!-- 列表区域 -->
		<div class="doc-wrapper">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list
				  offset="0"
				  v-model="loading"
				  :finished="finished"
				  finished-text="没有更多了"
				  @load="onLoad"
				>
					<div class="list-item">
						<div class="item-title">
							<div class="title-left">东善桥变-全面巡视-20210707</div>
							<div class="title-right">「待安排」</div>
						</div>
						<div class="item-person">
							<span>巡视人员：</span>
							<label>王辉、张爱国</label>
						</div>
						<div class="item-time">
							<span>要求计划时间：</span>
							<label>2021/07/20 16:30:00</label>
						</div>
						<div class="item-btn">
							<van-button class="btn" @click="excuteBtn" color="#0EB295" type="primary" size="small">接单</van-button>
							<van-button class="btn" color="#1481EE" type="primary" size="small">计划安排</van-button>
						</div>
					</div>
					<div class="list-item">
						<div class="item-title">
							<div class="title-left">东善桥变-全面巡视-20210707</div>
							<div class="title-right">「待执行」</div>
						</div>
						<div class="item-person">
							<span>巡视人员：</span>
							<label>王辉、张爱国</label>
						</div>
						<div class="item-time">
							<span>要求计划时间：</span>
							<label>2021/07/20 16:30:00</label>
						</div>
						<div class="item-btn">
							<van-button class="btn" color="#576B95" type="primary" size="small">追回</van-button>
						</div>
					</div>
					<div class="list-item">
						<div class="item-title">
							<div class="title-left">东善桥变-全面巡视-20210707</div>
							<div class="title-right">「已执行」</div>
						</div>
						<div class="item-person">
							<span>巡视人员：</span>
							<label>王辉、张爱国</label>
						</div>
						<div class="item-time">
							<span>要求计划时间：</span>
							<label>2021/07/20 16:30:00</label>
						</div>
						<div class="item-btn">
							<!-- <van-button class="btn" color="#0EB295" type="primary" size="small">接单</van-button>
							<van-button class="btn" color="#1481EE" type="primary" size="small">计划安排</van-button> -->
						</div>
					</div>
				</van-list>
			</van-pull-refresh>
		</div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "tourList",
		components:{
			Theader
		},
		data() {
			return {
				title: "巡视",
				loading:false,
				finished: false,
				refreshing:false,
				icon: {
					rfid:require('../../../../assets/tour/icon-rfid.png'),
					scan:require('../../../../assets/tour/icon-scan.png'),
					screen:require('../../../../assets/tour/icon-screen.png'),
					add:require('../../../../assets/tour/icon-add.png'),
				},
				taskName: "",//任务名称
			}
		},
		computed: {

		},
		methods: {
			onRefresh() {

			},
			onLoad() {
				
			},
			screen() {

			},
			addTask() {
				
			},
			excuteBtn() {
				this.$router.push({
					name: "exeTask",
				})
			}
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 ;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}
	.search_header{
		margin-top: 45px;
	}
	.search_header /deep/ .van-search__content{
		background: #fff;
	}

	.doc-wrapper{
		overflow-y: auto;
		height: calc(100% - 212px);
		margin: 0.6rem;
	}
	.list-item{
		background: #fff;
		padding: 0.8rem;
		margin-bottom: 0.7rem;
	}
	.item-title{
		display: flex;
		justify-content: space-between;
	}
	.item-title .title-left{
		font-size: 0.96rem;
		font-weight: bold;
		color:#333;
	}
	.item-title .title-right{
		font-size: 0.96rem;
		color:#0EB295;
	}
	.item-time,.item-person{
		font-size: 0.8125rem;
		color:#999;
		margin-top: 0.6rem;
	}
	.item-btn{
		width: 100%;
		margin-top: 0.7rem;
		justify-content: space-between;
    	display: flex;
	}
	.item-btn .btn{
		width: 48%;
	}
</style>